<template>
<div>
      <div>
            <div style="margin-bottom: 5px;margin-top: 5px;text-align: center">
                  <el-input v-model="title" placeholder="请输入标题" style="width: 200px" suffix-icon="Search"
                            @keyup.enter.native="loadPost"></el-input>
                  <el-button style="margin-left: 5px" type="primary" @click="loadPost">查询</el-button>
                  <el-button type="danger" @click="resetParam">重置</el-button>
                  <el-button type="success" @click="add">新增</el-button>
            </div>
            <el-scrollbar>
                  <el-table :data="tableData">
                        <el-table-column label="编号" prop="account"/>
                        <el-table-column label="标题" prop="title"/>
                        <el-table-column label="内容" prop="detail" showOverflowTooltip="true"/>
                        <el-table-column label="操作" prop="operate" >
                              <template v-slot="scope">
                                    <el-button size="small" type="success" @click="modify(scope.row)">编辑</el-button>
                                    <el-popconfirm  title="Delete this?"  @confirm="del(scope.row.id)">
                                          <template #reference>
                                                <el-button   size="small" type="danger">删除</el-button>
                                          </template>
                                    </el-popconfirm>
                              </template>
                        </el-table-column>
                  </el-table>
            </el-scrollbar>

            <el-dialog
                      v-model="dialogVisible"
                      :before-close="handleClose"
                      width="300"
            >
                  <el-form :model="form" label-width="auto" style="max-width: 600px"  :rules="rules" ref="form">
                        <el-form-item label="编号" prop="account">
                              <el-col :span="22">
                                    <el-input v-model="form.account"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="标题" prop="title">
                              <el-col :span="22">
                                    <el-input v-model="form.title"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="内容" prop="detail">
                              <el-col :span="22">
                                    <el-input v-model="form.detail" type="textarea"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="flag" style="display: none" prop="flag">
                              <el-col :span="22">
                                    <el-input value="0" v-model="form.flag" />
                              </el-col>
                        </el-form-item>
                  </el-form>
                  <template #footer>
                        <div class="dialog-footer">
                              <el-button @click="dialogVisible = false">取消</el-button>
                              <el-button type="primary" @click="doAdd">提交</el-button>
                        </div>
                  </template>
            </el-dialog>
            <el-dialog
                      v-model="modifyDialogVisible"
                      :before-close="handleClose"
                      width="300"
            >
                  <el-form :model="form" label-width="auto" style="max-width: 600px"  :rules="rules" ref="form">
                        <el-form-item label="标题" prop="title">
                              <el-col :span="22">
                                    <el-input v-model="form.title"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="内容" prop="detail">
                              <el-col :span="22">
                                    <el-input v-model="form.detail" type="textarea"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="flag" style="display: none" prop="flag">
                              <el-col :span="22">
                                    <el-input value="0" v-model="form.flag" />
                              </el-col>
                        </el-form-item>
                  </el-form>
                  <template #footer>
                        <div class="dialog-footer">
                              <el-button @click="dialogVisible = false">取消</el-button>
                              <el-button type="primary" @click="doModify">提交</el-button>
                        </div>
                  </template>
            </el-dialog>
      </div>
</div>
</template>

<script>
export default {
      name: "adminNews",
      data(){
            return{
                  tableData: [],
                  dialogVisible: false,
                  modifyDialogVisible: false,
                  form: {
                        id:'',
                        account:'',
                        title: '',
                        detail:'',
                        flag:'',
                  },
                  title:'',
            }
      },
      methods:{
            loadPost() {
                  this.$axios.get('http://localhost:8088/page/list').then(res => {
                        console.log("资讯数据==="+res.data)
                              this.tableData = res.data
                  })
            },
            add() {
                  this.dialogVisible = true
                  // this.$nextTick(()=>{
                  //       this.resetForm()
                  // })
            },
            doAdd(){
                  this.dialogVisible=true
                  this.$axios.post('http://localhost:8088/page/add', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogVisible = false
                              this.loadPost()
                        } else {
                              // alert("不是200")
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
            resetParam() {
                  this.title = ''
            },
            del(id){
                  console.log(id)
                  this.$axios.get('http://localhost:8088/page/del?id='+id).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.loadPost()
                        } else {
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
            modify(row){
                  console.log(row)
                  //      赋值到表单
                  this.modifyDialogVisible=true
                  this.$nextTick(()=>{
                        this.form=row
                  })
            },
            doModify(){
                  this.$axios.post('http://localhost:8088/page/update', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              // alert("是200")
                              // this.tableData = res.data
                              // this.total = res.total
                              // console.log(res.total)

                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.modifyDialogVisible = false
                              this.loadPost()
                        } else {
                              // alert("不是200")
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            },
      },
      mounted() {
            this.loadPost();
      }
}
</script>

<style scoped>

</style>